<template>
  <view class="container">
    <view class="certificate-info">
      <view class="info-row" v-for="(value, key) in certificateInfo" :key="key">
        <text class="label">{{ labels[key] }}</text>
        <text
          class="value"
          :style="{ color: value === '有效' ? 'green' : '#0d1444' }"
        >
          {{ value }}
        </text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      labels: {
        birthDate: "车牌号码",
        licenseDuration: "道路运输证号",
        licenseIssueDate: "经营范围",
        licenseExpiryDate: "证件状态",
        qualificationName: "查询日期",
        qualificationNumber: "经营状态",
        documentStatus: "所属企业",
        qualificationIssueDate: "营运机构",
        qualificationStartDate: "保险有效期起",
        qualificationEndDate: "保险有效期止",
        employmentStatus: "处理意见",
      },
      certificateInfo: {
        birthDate: "晋E45286*(黄色)",
        licenseDuration: "陕420581005764",
        licenseIssueDate: "道路旅客定制运输",
        licenseExpiryDate: "无效",
        qualificationName: "2024-10-19 18:57:28",
        qualificationNumber: "派车",
        documentStatus: "宝鸡金海滩有限公司",
        qualificationIssueDate: "宝鸡市交通运输局",
        qualificationStartDate: "2024-10-17",
        qualificationEndDate: "2026-10-16",
        employmentStatus: "续保处理",
      },
    };
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.container {
  background-color: #f3f6fa;
  padding: 0;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  position: relative; /* Ensure relative positioning for absolute children */
}

.certificate-info {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .info-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 600px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
    .label {
      color: #79829c;
      font-size: 14px;
      line-height: 1.2;
    }

    .value {
      color: #0d1444;
      font-size: 14px;
    }
  }
}
</style>
